<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>果蔬识别</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .container {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .upload-section {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .result-section {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: none;
        }
        
        .upload-area {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            margin: 20px 0;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .upload-area:hover {
            border-color: #3498db;
            background: #f1f7fb;
        }
        
        .upload-area i {
            font-size: 48px;
            color: #3498db;
            margin-bottom: 10px;
        }
        
        .preview-area {
            margin: 20px 0;
            text-align: center;
        }
        
        .preview-area img {
            max-width: 100%;
            max-height: 300px;
            border-radius: 8px;
            display: none;
        }
        
        .result-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .ingredient-name {
            font-weight: bold;
            color: #2c3e50;
        }
        
        .confidence {
            color: #3498db;
        }
        
        .button {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
            width: 100%;
        }
        
        .button:hover {
            background: #2980b9;
        }
        
        .button:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
        }
        
        #uploadInput {
            display: none;
        }

        .api-docs {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-top: 20px;
        }

        .api-docs h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .api-docs pre {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }

        .api-docs code {
            font-family: Consolas, Monaco, 'Courier New', monospace;
        }

        .api-section {
            margin-bottom: 20px;
        }

        .api-section h4 {
            color: #2c3e50;
            margin: 10px 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }

        th, td {
            padding: 8px;
            border: 1px solid #ddd;
            text-align: left;
        }

        th {
            background: #f8f9fa;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="upload-section">
            <h2>果蔬识别</h2>
            <p>上传图片，快速识别图片中的果蔬食材</p>
            
            <input type="file" id="uploadInput" accept="image/*">
            <div class="upload-area" onclick="document.getElementById('uploadInput').click()">
                <i class="fas fa-carrot"></i>
                <p>点击或拖拽图片到此处上传</p>
            </div>
            
            <div class="preview-area">
                <img id="previewImage" alt="预览图">
            </div>
            
            <button class="button" onclick="startRecognition()" id="recognizeBtn" disabled>
                开始识别
            </button>
        </div>
        
        <div class="result-section" id="resultSection">
            <h3>识别结果</h3>
            <div id="resultList"></div>
        </div>
    </div>

    <div class="api-docs">
        <h3>API 文档</h3>
        
        <div class="api-section">
            <h4>接口描述</h4>
            <p>该接口用于识别图片中的果蔬食材，返回食材名称和置信度。</p>
        </div>

        <div class="api-section">
            <h4>请求URL</h4>
            <pre><code>POST /ingredient/recognize</code></pre>
        </div>

        <div class="api-section">
            <h4>调用方式</h4>
            <table>
                <tr>
                    <th>请求方式</th>
                    <th>请求格式</th>
                    <th>返回格式</th>
                </tr>
                <tr>
                    <td>POST</td>
                    <td>multipart/form-data</td>
                    <td>application/json</td>
                </tr>
            </table>
        </div>

        <div class="api-section">
            <h4>请求参数</h4>
            <table>
                <tr>
                    <th>参数名称</th>
                    <th>是否必选</th>
                    <th>类型</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>image</td>
                    <td>是</td>
                    <td>file</td>
                    <td>图像文件，支持PNG、JPG、JPEG格式，最短边至少15px，最长边最大4096px</td>
                </tr>
                <tr>
                    <td>top_num</td>
                    <td>否</td>
                    <td>integer</td>
                    <td>返回预测得分top结果数，默认为5，最大20</td>
                </tr>
            </table>
        </div>

        <div class="api-section">
            <h4>返回参数</h4>
            <table>
                <tr>
                    <th>参数名称</th>
                    <th>类型</th>
                    <th>说明</th>
                </tr>
                <tr>
                    <td>name</td>
                    <td>string</td>
                    <td>食材名称</td>
                </tr>
                <tr>
                    <td>score</td>
                    <td>number</td>
                    <td>置信度分数，范围0-1</td>
                </tr>
            </table>
        </div>

        <div class="api-section">
            <h4>示例</h4>
            <pre><code>// 请求示例
POST /ingredient/recognize
Content-Type: multipart/form-data

// 请求参数
{
    "image": "图片文件",
    "top_num": 5
}

// 返回示例
{
    "results": [
        {
            "name": "胡萝卜",
            "score": 0.95
        },
        {
            "name": "西红柿",
            "score": 0.89
        }
    ]
}</code></pre>
        </div>

        <div class="api-section">
            <h4>注意事项</h4>
            <ul>
                <li>图片格式：支持PNG、JPG、JPEG格式</li>
                <li>图片大小：base64编码后大小不超过4M</li>
                <li>图片尺寸：最短边至少15px，最长边最大4096px</li>
                <li>建议：上传清晰的食材图片，尽量避免模糊、暗光等情况</li>
            </ul>
        </div>
    </div>

    <script>
        // 图片预览功能
        document.getElementById('uploadInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById('previewImage');
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                    document.getElementById('recognizeBtn').disabled = false;
                }
                reader.readAsDataURL(file);
            }
        });

        // 识别功能
        function startRecognition() {
            const file = document.getElementById('uploadInput').files[0];
            if (!file) return;

            const formData = new FormData();
            formData.append('image', file);

            // 显示加载状态
            document.getElementById('recognizeBtn').disabled = true;
            document.getElementById('recognizeBtn').textContent = '识别中...';

            fetch('/ingredient/recognize', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                console.log('API Response:', data);
                if (data.error) {
                    throw new Error(data.error);
                }
                displayResults(data);
            })
            .catch(error => {
                console.error('Error:', error);
                alert('识别过程中发生错误：' + error.message);
            })
            .finally(() => {
                document.getElementById('recognizeBtn').disabled = false;
                document.getElementById('recognizeBtn').textContent = '开始识别';
            });
        }

        // 显示结果
        function displayResults(data) {
            console.log('Displaying results:', data);
            const resultSection = document.getElementById('resultSection');
            const resultList = document.getElementById('resultList');
            resultList.innerHTML = '';
            
            if (data.results && data.results.length > 0) {
                data.results.forEach(result => {
                    console.log('Processing result:', result);
                    const resultItem = document.createElement('div');
                    resultItem.className = 'result-item';
                    
                    resultItem.innerHTML = `
                        <div class="result-header">
                            <span class="ingredient-name">${result.name}</span>
                            <span class="confidence">${(result.score * 100).toFixed(2)}%</span>
                        </div>
                    `;
                    resultList.appendChild(resultItem);
                });
                resultSection.style.display = 'block';
            } else {
                resultList.innerHTML = '<div class="result-item">未能识别出果蔬</div>';
                resultSection.style.display = 'block';
            }
        }
    </script>
</body>
</html> 